<template>
  <div>
    <el-tag>当前可用的hadoop集群列表:</el-tag>
    <br><br>
    <el-table max-height="500" :data="formData.currentClusterList" highlight-current-row
              @row-click="rowClusterClick">
      <el-table-column label="集群ID" width="200">
        <template slot-scope="scope">
          <el-radio :label="scope.row.id" v-model="formData.clusterId">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column label="集群名称" prop="clusterName" min-width="500"/>
      <el-table-column label="flink版本" prop="flinkVersion" min-width="500"/>
      <el-table-column label="备注" prop="remark" min-width="500"/>
    </el-table>
    <br>
    <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px">
      <el-form-item label="集群ID" prop="clusterId">
        <el-input v-model="formData.clusterId" placeholder="请输入集群ID" :maxlength="11" show-word-limit readonly
                  clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入项目名称" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="项目描述" prop="description">
        <el-input v-model="formData.description" placeholder="请输入项目描述" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import {
  addApplication,
  updateApplication
} from "@/api/resource/application";

export default {
  components: {},
  props: {
    formData:{
      type:Object,
      default:null
    }

  },
  data() {
    return {
      isSave: false,
      rules: {
        clusterId: [{
          required: true,
          message: '请输入集群ID',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入项目名称',
          trigger: 'blur'
        }],
        description: [{
          required: true,
          message: '请输入项目描述',
          trigger: 'blur'
        }]
      },
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {

  },
  methods: {

    initData: function (value) {
      if (value != null) {
        this.formData.id = value.id;
        this.formData.clusterId = value.clusterId;
        this.formData.name = value.name;
        this.formData.description = value.description;
        this.formData.remark = value.remark;
      } else {
        this.formData.id = '';
        this.formData.clusterId = '';
        this.formData.name = '';
        this.formData.description = '';
        this.formData.remark = '';
      }
    },

    clearData: function () {
      this.resetForm()
    },
    rowClusterClick(row) {
      this.formData.clusterId = row.id;
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.isSave = true;
        addApplication(this.formData).then(res => {
          this.$message.success("保存成功！")
          this.isSave = false;
          this.resetForm();
          this.$emit("applicationSaveOk")
        }).catch(err => {
          this.$message.error("保存失败！" + err)
          this.isSave = false;
        })
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
